<template>
  <div class="">
    <van-image class="login-logo-img" :src="require('../../assets/ic_login_logo.png')"/>
    <div class="input_1 flex-row">
      <Vue3CountryIntl schema="popover" v-model="schemaPopoverData.default"
                       v-model:visible="schemaPopoverData.defaultVisible">
        <div class="" @click="schemaPopoverData.defaultVisible = true">
          <text class="text_2">+{{ schemaPopoverData.default || '--' }}</text>
          <van-image class="icon_1" :src="require('../../assets/ic_login_arrow_below.png')"/>
        </div>
      </Vue3CountryIntl>
      <input class="text_3" :placeholder="$t('msg.registerStr2')" style="width: 98px; height: 20px" v-model="phone"
             maxlength="15" type="tel"/>
    </div>
    <div class="input_2 flex-row justify-between">
      <input class="text_3" type="passWord" :placeholder="$t('msg.registerStr3')" v-model="passWord"/>
    </div>
    <div class="text-wrapper_1">
      <text class="text_7" @click="forget()">{{ $t('msg.loginStr1') }}</text>
    </div>
    <div class="text-wrapper_2">
      <button class="button_1 center" @click="submit">{{ $t('msg.loginStr2') }}</button>
    </div>
    <div class="text-wrapper_2">
      <text class="text_6" @click="regist()">{{ $t('msg.registerStr1') }}</text>
    </div>
  </div>
</template>

<script>

import {login_token} from "@/http/api";
import {showToast} from "vant";
import {reactive} from "vue";
import {storage, TOKEN_DATA, TOKEN_PRE} from "@/utils/storage";

export default {
  setup() {
    let schemaPopoverData = reactive({
      default: '86',
      defaultVisible: false,
    });
    return {
      schemaPopoverData,
    };
  },
  data() {
    return {
      phone: "",
      passWord: "",
    }
  },
  methods: {
    regist() {
      this.$router.push('/register');
    },
    forget() {
      this.$router.push('/forget');
    },
    async submit() {
      try {
        let params = {
          phone: '+' + this.schemaPopoverData.default + this.phone,
          passWord: this.passWord,
          channel: "website",
          grant_type: "phone"
        }
        console.log(params)
        let data = await login_token(params)
        storage.set(TOKEN_PRE, data.token_type)
        storage.set(TOKEN_DATA, data.access_token)
        history.back()
      } catch (e) {
        showToast(e.message)
      }
    },
  }
}
</script>

<style scoped>
.login-logo-img {
  width: 180px;
  height: 56px;
  margin-top: 122px;
  align-self: center;
}

.input_1 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 60px 30px 20px 30px;

}

.input_2 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 15px 30px 10px 30px;

}

.icon_1 {
  width: 8px;
  height: 5px;
  margin-left: 4px;
  align-items: center;

}

.icon_2 {
  width: 20px;
  height: 20px;
  padding: 5px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text_2 {
  width: 26px;
  height: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  line-height: 18px;
}

.text_3 {
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-left: 16px;
  border: none;
  outline: none;
  background: transparent;
  color: #000000;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  ::placeholder{
    color: #A8A8A8;
  }
}

.text-wrapper_1 {
  text-align: end;
  margin-right: 20px;
  padding: 6px;
}

.text-wrapper_2 {
  text-align: center;
  margin-top: 20px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text_6 {
  font-size: 17px;
  color: #AB9263;
}

.text_7 {
  color: #AB9263;
  font-size: 13px;
  text-align: center;
}

.button_1 {
  margin-top: 20px;
  width: 353px;
  height: 48px;
  background: #AB9263;
  border-radius: 24px;
  border: none;
  font-size: 17px;
  color: #FFFFFF;
}

</style>
